<template>
  <div class="player-list-container">
    <h3 class="player-list-title">👥 玩家列表 ({{ players.length }}/{{ maxPlayers }})</h3>
    
    <div class="players-grid">
      <div 
        v-for="player in players" 
        :key="player.id"
        class="player-card"
        :class="{ 
          'current-player': player.id === currentPlayerId,
          'ready': player.isReady,
          'playing': player.isPlaying
        }"
      >
        <div class="player-avatar">
          <div 
            class="player-color-indicator"
            :style="{ backgroundColor: player.color }"
          ></div>
          <span class="player-number">{{ player.playerNumber }}</span>
        </div>
        
        <div class="player-info">
          <div class="player-name">
            {{ player.name }}
            <span v-if="player.id === currentPlayerId" class="you-badge">你</span>
          </div>
          
          <div class="player-status">
            <span v-if="player.isReady" class="status ready">准备就绪</span>
            <span v-else-if="player.isPlaying" class="status playing">游戏中</span>
            <span v-else class="status waiting">等待中</span>
          </div>
          
          <div v-if="gameInProgress" class="player-score">
            得分: {{ player.score || 0 }}
          </div>
        </div>
        
        <div class="player-actions">
          <button 
            v-if="!player.isReady && !gameInProgress && player.id !== currentPlayerId"
            @click="kickPlayer(player.id)"
            class="kick-btn"
            title="踢出玩家"
          >
            🚫
          </button>
        </div>
      </div>
      
      <!-- 空位占位符 -->
      <div 
        v-for="i in (maxPlayers - players.length)" 
        :key="`empty-${i}`"
        class="player-card empty-slot"
      >
        <div class="empty-avatar">
          <span class="empty-icon">+</span>
        </div>
        <div class="empty-info">
          <span class="empty-text">等待加入</span>
        </div>
      </div>
    </div>
    
    <div class="room-info">
      <div class="room-name">
        <strong>房间:</strong> {{ roomName }}
      </div>
      <div class="room-code">
        <strong>房间码:</strong> 
        <span class="code">{{ roomCode }}</span>
        <button @click="copyRoomCode" class="copy-btn" title="复制房间码">
          📋
        </button>
      </div>
    </div>
    
    <div v-if="!gameInProgress" class="game-controls">
      <button 
        @click="toggleReady"
        class="ready-btn"
        :class="{ 'ready': isCurrentPlayerReady }"
      >
        {{ isCurrentPlayerReady ? '取消准备' : '准备就绪' }}
      </button>
      
      <button 
        v-if="isRoomOwner"
        @click="startGame"
        class="start-btn"
        :disabled="!canStartGame"
      >
        开始游戏
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  players: {
    type: Array,
    default: () => []
  },
  maxPlayers: {
    type: Number,
    default: 6
  },
  roomName: {
    type: String,
    default: '游戏房间'
  },
  roomCode: {
    type: String,
    default: ''
  },
  gameInProgress: {
    type: Boolean,
    default: false
  },
  currentPlayerId: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['toggle-ready', 'start-game', 'kick-player'])

const isCurrentPlayerReady = computed(() => {
  const currentPlayer = props.players.find(p => p.id === props.currentPlayerId)
  return currentPlayer?.isReady || false
})

const isRoomOwner = computed(() => {
  const currentPlayer = props.players.find(p => p.id === props.currentPlayerId)
  return currentPlayer?.isOwner || false
})

const canStartGame = computed(() => {
  const readyPlayers = props.players.filter(p => p.isReady)
  return readyPlayers.length >= 2 && readyPlayers.length === props.players.length
})

function toggleReady() {
  emit('toggle-ready')
}

function startGame() {
  if (canStartGame.value) {
    emit('start-game')
  }
}

function kickPlayer(playerId) {
  if (confirm('确定要踢出这个玩家吗？')) {
    emit('kick-player', playerId)
  }
}

function copyRoomCode() {
  navigator.clipboard.writeText(props.roomCode).then(() => {
    // 可以添加一个提示
    alert('房间码已复制到剪贴板！')
  }).catch(() => {
    // 降级方案
    const textArea = document.createElement('textarea')
    textArea.value = props.roomCode
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    alert('房间码已复制到剪贴板！')
  })
}
</script>

<style scoped>
.player-list-container {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 400px;
}

.player-list-title {
  margin: 0 0 1.5rem 0;
  color: #333;
  font-size: 1.2rem;
  text-align: center;
}

.players-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.player-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
  position: relative;
}

.player-card.current-player {
  border-color: #007bff;
  background-color: #f8f9ff;
}

.player-card.ready {
  border-color: #28a745;
  background-color: #f8fff9;
}

.player-card.playing {
  border-color: #ffc107;
  background-color: #fffbf0;
}

.player-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-color-indicator {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.player-number {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #007bff;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

.player-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.player-name {
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.you-badge {
  background: #007bff;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: normal;
}

.player-status {
  font-size: 0.9rem;
}

.status {
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status.ready {
  background: #d4edda;
  color: #155724;
}

.status.playing {
  background: #fff3cd;
  color: #856404;
}

.status.waiting {
  background: #e2e3e5;
  color: #383d41;
}

.player-score {
  font-weight: 600;
  color: #007bff;
}

.player-actions {
  display: flex;
  gap: 0.5rem;
}

.kick-btn {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.kick-btn:hover {
  background: #c82333;
  transform: scale(1.1);
}

.empty-slot {
  border-style: dashed;
  border-color: #dee2e6;
  background-color: #f8f9fa;
  opacity: 0.7;
}

.empty-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-icon {
  font-size: 1.5rem;
  color: #adb5bd;
  font-weight: bold;
}

.empty-text {
  color: #6c757d;
  font-style: italic;
}

.room-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.room-name, .room-code {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.code {
  background: #e9ecef;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
  color: #495057;
}

.copy-btn {
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.copy-btn:hover {
  background: #5a6268;
}

.game-controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.ready-btn, .start-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  min-width: 120px;
}

.ready-btn {
  background: #6c757d;
  color: white;
}

.ready-btn.ready {
  background: #28a745;
}

.ready-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.start-btn {
  background: #007bff;
  color: white;
}

.start-btn:hover:not(:disabled) {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.start-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 768px) {
  .player-list-container {
    max-width: 100%;
  }
  
  .game-controls {
    flex-direction: column;
  }
  
  .ready-btn, .start-btn {
    min-width: auto;
    width: 100%;
  }
}
</style> 